<template>
  <div class="column">
    <div class="boxTitle">
      业务待办事项统计
    </div>
    <div class="sx-list">
      <div class="sx-item">
         <div class="img">
              <span class="num">22</span>
          </div>
          <div class="t">申请数</div>
      </div>
       <div class="sx-item">
         <div class="img img2">
              <span class="num num2">22</span>
          </div>
          <div class="t">已处理</div>
      </div>
       <div class="sx-item">
         <div class="img img1">
              <span class="num num3">22</span>
          </div>
          <div class="t">待处理</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'yewudaiban',
  data () {
    return {
      
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .sx-list{
    float:left;
    padding:10% 0;
    height:100%;
    display: flex;
    justify-content: space-between;
  }
  .sx-item{
    width:110px;
    

    float:left;
    height:140px;
  }
  .sx-item .img{
    text-align: center;
   
    height:60%;
    background: url(../../../static/bg.png) no-repeat;
    background-size: 100%;
  }
   .sx-item .img1{
      background: url(../../../static/bg2.png) no-repeat;
       background-size: 100%;
   }

    .sx-item .img2{
      background: url(../../../static/bg3.png) no-repeat;
       background-size: 100%;
   }
  .sx-item .num{
    display: block;
    height:100%;
    padding-top:18%;
    line-height:100%;
    vertical-align: bottom;
    color:#ffcc00;
    font-size:22px;
  }
  .sx-item .num2{
    color:#18be6b;
  }
  .sx-item .num3{
    color:#fb6a5e;
  }
  .sx-item .t{
    color:#6484d1;
    text-align: center;
    font-size: 16px;
  }
</style>
